<script lang="ts" setup>
import { ProjectCarouselModel } from '@/api/webSite/response';
import { defineProps, ref, computed, onMounted, onUnmounted } from 'vue';

const { projectCarousels } = defineProps<{
  projectCarousels: Array<ProjectCarouselModel>;
}>();

const activeIndex = ref(0);

function togglePart(index: number) {
  activeIndex.value = index;
  console.log(index);
}

const activeProjectCarouse = computed(() => {
  return projectCarousels[activeIndex.value];
});

let timer: any = null;
onMounted(() => {
  timer = setInterval(() => {
    if (activeIndex.value < 2) {
      activeIndex.value++;
    }
    else {
      activeIndex.value = 0;
    }
  }, 2000);
})

onUnmounted(() => {
  if (timer) {
    clearInterval(timer);
  }
})

</script>

<template>
  <div class="card">
    <div class="slider">
      <!-- 动态生成滑动条 -->
      <span v-for="(carousel, index) in projectCarousels" :key="index" class="slide"
        :class="{ active: index === activeIndex }" @click="togglePart(index)"></span>
    </div>
    <div class="inner_part">
      <img class="project-img" :src="activeProjectCarouse?.Image" :class="{ show: activeProjectCarouse }" />
      <div class="content" :class="{ show: activeProjectCarouse }">
        <div class="title">{{ activeProjectCarouse?.Title }}</div>
        <div class="text">{{ activeProjectCarouse?.Desc }}</div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.card {
  height: 405px;
  width: 100%;
  max-width: 850px;
  margin: auto;
  background-color: #fff;
  border-radius: 25px;
  box-shadow: 10px 0 50px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}

.inner_part {
  display: flex;
  align-items: center;
  padding: 30px;
  height: 100%;
}

.project-img {
  height: 260px;
  width: 260px;
  border-radius: 20px;
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.2);
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s;
}

.content {
  padding-left: 35px;
  width: calc(100% - 260px);
  opacity: 0;
  transition: opacity 0.6s;
}

.project-img.show,
.content.show {
  opacity: 1;
}

.title {
  font-size: 30px;
  font-weight: 700;
  color: #0d0925;
  margin-bottom: 20px;
}

.text {
  font-size: 19px;
  color: #4e4a67;
  line-height: 1.5em;
  text-align: justify;
}

.slider {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 5px;
}

.slide {
  width: 50px;
  height: 10px;
  background-color: #d9d9d9;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slide.active {
  background-color: #000;
}
</style>
